<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>汉心在线练习学习程序</title>
    <style>
        body {
            background: linear-gradient(to right, #4cbf30 -30%, #0f9d58);
        }

        .container {
            background-color: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(10px);
            background-repeat: repeat;
            background-size: cover;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        }

        h1 {
            font-weight: 900;
            margin-top: 0;
            text-align: center;
            color: #303131;

            font-size: 60px;

            font-family: "宋体", "SimSun", sans-serif;
            align-items: center;

        }

        table {
            border-collapse: collapse;
            width: 100%;
            margin-bottom: 20px;
            background-color: #fff;
        }

        /* 第一行背景色 */

        th,
        td {
            padding: 10px;
            text-align: left;
            /* border-bottom: 1px solid #0f9d58;
            border-right: 1px solid #0f9d58;
            border-top: 1px solid #0f9d58;
            border-left: 1px solid #0f9d58; */
            border: 0.5px solid #686b69;

        }

        tbody {
            border: 1px solid black;
        }

        a {
            text-decoration: none;
            font-weight: bold;
        }


        img {
            max-width: 100%;
            height: auto;
            margin-bottom: 10px;
        }

        hr {
            border: none;
            height: 1px;
            background-color: rgb(0, 0, 0);
            margin: 20px 0;
        }

        p {
            line-height: 2.5;
        }
        .center {
          text-align: center;
      }
      .highlight {
        color: rgb(221, 21, 21);
    }
    .myDiv1 {
        display: flex; align-items: center; justify-content: center;
}

    </style>
</head>

<body>
    <div class="container">

<br/><br/><br/>
       
<div class="myDiv1">
    <div>
        <img src="./tupian/logo.png" alt="Your Image" style="float: left; width: 67px; height:  67px;">
        <h1 style="margin-left: 81px;"><span class="highlight">汉心码</span>学习课程</h1>
    </div>
</div>
<a href="https://hanxinma.gitlab.io/js/xuexi" style="display: flex; align-items: center; justify-content: center; margin: 0 auto; color: black;" >汉心一条龙学习程序（双拼和辅助码，轻松无痛学会）点我跳转</a>  
<a href="https://hanxinma.gitlab.io/" style="display: flex; align-items: center; justify-content: center; margin: 0 auto; color: black;" >回首页</a>  

<br/><br/>
        <table>
            <thead>
                <tr style="background-color: rgb(240, 233, 233);">
                    <th>入门课</th>
                    <th><strong>学成毕业</strong></th>
                    <th><strong>深造成专家</strong>（可选）</th>
                </tr>
            </thead>

            <tbody>
           
                <tr>
                    <td><a href="https://hanxinma.gitlab.io/js/zy.html" target="_blank" class="dynamic-link">字根基本课</a></td>
                    <td><a href="https://hanxinma.gitlab.io/js/gz.html" target="_blank" class="dynamic-link">规则理论课</a></td>
                    <td><a href="https://hanxinma.gitlab.io/js/zyi.html" target="_blank" class="dynamic-link">注意的字研究生课</a></td>
                </tr>
                <tr style="color: #7e7e7e;">
                    <td>学完就基本会了，获得鼓励奖状</td>
                    <td>学完考试通过获得毕业证，顺利毕业即可出师，</td>
                    <td>可选修研究生课程，可获得专家证书，可不学，因为很难。</td>
                </tr>
            </tbody>
        </table>
 




        <hr> <h1 style="font-size: 36px;">学完获得福利和证书展示</h1> 

        <p>学会了字根，可以获得奖状<br><a href="https://hanxinma.gitlab.io/js/zy.html" target="_blank" 
                class="dynamic-link">字根学习系统</a><br>名字可以写你的名字<br><img src="./tupian/%E9%BC%93%E5%8A%B1.jpg"
                alt="image.png"></p>
        <hr>


        <p>学会规则可以获得毕业证<br>95分以上可以拿毕业证<br>
            
            <a href="https://hanxinma.gitlab.io/js/gz.html" target="_blank" 
                class="dynamic-link">规则学习系统</a><br>  <h100 id="section1"></h100>名字可以写你的名字<br>
              
                <img src="./tupian/%E6%AF%95%E4%B8%9A.jpg"
                alt="image.png"></p>  
              
        <p><a target="_blank" rel="noopener" href="https://support.qq.com/product/607360" target="_blank" 
                class="dynamic-link">这里可以发帖晒你的毕业证</a></p>
             
               
                <p><a target="_blank" rel="noopener" href="https://support.qq.com/product/607360" target="_blank" 
                    class="dynamic-link"></a>
                </p>





        <hr>
        <p>这个专家证很难拿，需要100分<br>但是这个一般不建议学，除非你想专业练打字。因为很难，学会前面两个就毕业了，就可以用了。这个里面如果感兴趣看看就可以了。100分只是卡专家的难度设计的门槛。<br>
            
            
            <a
                href="https://hanxinma.gitlab.io/js/zyi.html" target="_blank"  class="dynamic-link">注意的字学习系统</a>
                
                <br>名字可以写你的名字<br><img src="./tupian/%E4%B8%93%E5%AE%B6.jpg" alt="image.png"><br></p>
                <h100 id="section2"></h100>

<p><a target="_blank" rel="noopener" href="https://support.qq.com/product/607360" target="_blank" 
    class="dynamic-link">
    <p><a target="_blank" rel="noopener" href="https://support.qq.com/product/607360" target="_blank" 
        class="dynamic-link">这里可以发帖晒你的专家证</a></p>
    
   </a>
</p>

               
    </div>

    <script>
        const links = document.querySelectorAll('.dynamic-link');

        function changeColor() {
            links.forEach(link => {
                const randomColor = Math.floor(Math.random() * 16777215).toString(16);
                link.style.color = "#" + randomColor;
            });
        }

        setInterval(changeColor, 1000); // 每秒钟改变一次颜色
    </script>
</body>

</html>